Chrome DevTools
Obejctをコピーする方法
https://dackdive.hateblo.jp/entry/2015/09/10/100117
パネル
Elementパネル
Networkパネル
coverageパネル
recorderパネル
Performanceパネル
Memoryパネル
Auditsパネル
Sourceパネル
Renderingのやつ
なんか項目増えてるmrsekut.icon
https://gyazo.com/eb810ac1a7b428b864f58f0523de4796
Chrome DevToolsのconsole.log
Chrome DevToolsのdebugger
https://www.mizdra.net/entry/2021/05/03/000139
debuggerという文字を仕込むとdebuggerで見れる
monitor関数を使う
https://developer.chrome.com/docs/devtools/console/utilities/#monitor
https://blog.pastak.net/entry/2021/05/03/011623
React Developper Tools
こっちにもrenderingを示すやつがあるのか..mrsekut.icon
ずっとCDTのほうかと思ってた
https://qiita.com/nabeliwo/items/de0bc076ed7105dda2ca#comment-71623219acb9f6e51472
Reactのパフォーマンス#5d6f980e19827000007617a2
緑の枠のやつは以下のときに表示される
FCの本体が実行されるとき
↑の結果としてVirtual DOMの差分検出処理が走るとき
緑のやつがバンバン出るからといってパフォーマンスにすごく影響が出るわけではない
上の2つの処理コストがいつも大きいわけではない
なので、そこに拘って消していくことがいつもコスパが良いかどうかは微妙
https://nbviewer.jupyter.org/format/slides/github/mrsekut/slides/blob/master/ChromeDevToolで計測する.ipynb#/
前作っったスライド
https://qiita.com/ryo2132/items/d02863bddbd0c86efa4a
この記事、動画があってわかりやすいmrsekut.icon
$0で選択中のDOM要素の取得
styleやるときに便利？
DOM変化からのDebugger起動（Break on）
Exceptionの発生箇所で自動停止
snippetの登録
APIリクエストの実行形式でのコピー
Jsonをformatして表示する
https://twitter.com/mgechev/status/1371332904366800904?s=12
https://zenn.dev/koki_tech/articles/9deb70d0a9befb
https://youtu.be/5H3Sswp5qYg?t=3401
Eruda
https://coliss.com/articles/build-websites/operation/work/chrome-devtools-tips-and-tricks.html